<template>
  <div class="wrapper">
    <div class="block">
      <div
        v-show="slideVisible"
        class="column-center itemBox transition-box"
        @click="handleClick('addFriend')"
      >
        添加好友
        <div class="meetingIcon">
          <i class="el-icon-user"></i>
        </div>
      </div>
      <div
        v-show="slideVisible2"
        class="column-center itemBox transition-box"
        @click="handleClick('createOrganization')"
      >
        创建分组
        <div class="meetingIcon">
          <i class="el-icon-folder-add"></i>
        </div>
      </div>
      <div
        v-show="slideVisible3"
        class="column-center itemBox transition-box"
        @click="handleClick('addGroup')"
      >
        添加群组
        <div class="meetingIcon">
          <i class="el-icon-s-custom"></i>
        </div>
      </div>
      <div
        v-show="slideVisible4"
        class="column-center itemBox transition-box"
        @click="handleClick('createGroup')"
      >
        创建群组
        <div class="meetingIcon">
          <i class="el-icon-folder-add"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddFrom',
  data () {
    return {
      slideVisible: false,
      slideVisible2: false,
      slideVisible3: false,
      slideVisible4: false,
      addPopupShow: false
    }
  },
  mounted () {
    this.addPopup()
  },
  methods: {
    addPopup () {
      this.slideVisible = true
      this.slideVisible2 = true
      this.slideVisible3 = true
      this.slideVisible4 = true
    },
    /**
     * 点击
     */
    handleClick (option) {
      this.$emit('control', option)
    }
  }
}
</script>

<style lang="scss" scoped>
.column-center {
  display: flex;
  align-items: flex-end;
}
.wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 100%;
  width: 100%;
  position: relative;
  .block {
    display: flex;
    flex-direction: column-reverse;
    color: #ffffff;
    font-size: 15px;
    position: absolute;
    bottom: 70px;
    right: 20px;
    .itemBox {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      cursor: pointer;
      .meetingIcon {
        margin-left: 10px;
        font-size: 20px;
        border-radius: 100%;
        padding: 5px;
        background-color: #ffffff;
        color: $blue;
      }
    }
  }
}
.right-enter,
.right-leave-to {
  transform: translate3d(100%, 0, 0);
}
.right-leave,
.right-enter-to {
  transform: translate3d(0, 0, 0);
}
.right-enter-active,
.right-leave-active {
  transition: all 0.2s;
}
</style>
